<template>
	<view>
		<z-paging ref="paging"  v-model="dataList" @query="queryList" :refresher-enabled="!shaixuanShow" >
			<template #top>
				<view class="shaixuanBar">
					<u-icon name="grid-fill" size="30" label="筛选" @tap="shaixuanShow=true"></u-icon>
				</view>
				
			</template>
			<u-popup :show="shaixuanShow" @close="shaixuanShow=false" mode="right">
				<view class="shaixuanBox">
					
					<view class="label">选择状态</view>
					<view class="wq-ipt1">
						<niceui-data-select-input v-model="condi.status" @change="statusChange" :localdata="statusArr">
							
						</niceui-data-select-input>
					</view>
					
					<view class="label">产品编码</view>
					<input class="wq-ipt" type="number" placeholder="请输入产品编码筛选" v-model="condi.skuNo"></input>
					<view class="label">KKS编码</view>
					<input class="wq-ipt" type="text" placeholder="请输入KKS编码筛选" v-model="condi.kksno"></input>
					<view class="label">进厂时间开始</view>
					<view class="time" @tap="startCalShow=true" >
						{{condi.startAt==''?'请点击选择':condi.startAt}}
					</view>
					 <u-datetime-picker
								ref="datetimePicker"
								:show="startCalShow"
					            v-model="condi.startTime"
								mode="date"
								
								@confirm="startChange"
								@close="this.startCalShow=false"
					        ></u-datetime-picker>
					<view class="label">进厂时间结束</view>
					<view class="time" @tap="endCalShow=true" >
						{{condi.endAt==''?'请点击选择':condi.endAt}}
					</view>
					 <u-datetime-picker
								ref="datetimePicker2"
								:show="endCalShow"
					            v-model="condi.endTime"
								mode="date"
								
								@confirm="endChange"
								@close="this.endCalShow=false"
					        ></u-datetime-picker>
					<view class="label">产品名称</view>
					<input class="wq-ipt" type="text" placeholder="请输入产品名称筛选" v-model="condi.name"></input>
					<view class="label">产品型号</view>
					<input class="wq-ipt" type="text" placeholder="请输入产品型号筛选" v-model="condi.cpxh"></input>
					<!-- <view class="label">产品规格</view>
					<input class="wq-ipt" type="text" placeholder="请输入产品规格筛选" v-model="condi.cpgg"></input> -->
					<view class="label">产品口径</view>
					<input class="wq-ipt" type="text" placeholder="请输入产品口径筛选" v-model="condi.cpkj"></input>
					<view class="xidi">
						<view class="wq-btn1" @tap="shaixuan">筛选</view>
						<view class="wq-btn1" @tap="reset" style="background:#e61022">重置</view>
					</view>
				</view>
			</u-popup>
			<view class="listItem" v-for="(item,index) in dataList">
				<view class="itemText">产品码:{{item.skuNo}}</view>
				<view class="itemText">KKS码:{{item.kksno==""?'未设置':item.kksno}}</view>
				<view class="itemText">商品名称:{{item.name}}</view>
				<view class="itemText">商品数量:{{item.num}}</view>
				
				<view class="itemText">当前状态:<statusLabelC :status="item.status"></statusLabelC></view>
				<actionGroupC :status="item.status" :id="item.id"></actionGroupC>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import api from '@/api.js'
	import helper from '@/common/helper.js'
	export default {
		mixins:[helper],
		data() {
			return {
				dataList:[],
				customArr:[],
				startCalShow:false,
				endCalShow:false,
				mode:'range',
				statusArr:[
					{
						value:0,
						text:"已进厂待拆修"
					},{
						value:1,
						text:"待确认维修"
					},{
						value:2,
						text:"已确认待维修"
					},{
						value:3,
						text:"已维修待试压"
					},{
						value:4,
						text:"已试压喷漆待入库"
					},{
						value:6,
						text:'已入库待出库'
					},{
						value:7,
						text:"已出库待确认收货"
					},{
						value:8,
						text:'已完成'
					}
				],
				shaixuanShow:false,
				condi:{
					name:'',
					status:'',
					customId:'',
					skuNo:'',
					kksno:'',
					cpxh:'',
					cpgg:'',
					cpkj:'',
					phone:'',
					personName:'',
					createAt:'',
					chejian:'',
					startTime:'',
					endTime:'',
					startAt:'',
					endAt:'',
				}
					
			}
		},
		onLoad(e){
			if(e.status){
				this.condi.status=e.status;
				this.statusArr.forEach((it,idx)=>{
					if(it.value==e.status){
						uni.setNavigationBarTitle({
							title:it.text+"产品列表",
							
						})
					}
				})
				
			}
			if(!uni.getStorageSync('ctoken')){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
		},
		methods: {
			statusChange(e){
				this.statusArr.forEach((it,idx)=>{
					if(it.value==e){
						uni.setNavigationBarTitle({
							title:it.text+"产品列表",
							
						})
					}
				})
			},
			reloadCurrentList(){
				this.$refs.paging.reload();
			},
			startChange(e){
				this.condi.startTime=e.value;
				this.condi.startAt=this.timestampToDate(e.value);
				
				this.startCalShow=false;
			},
			endChange(e){
				this.condi.endTime=e.value;
				this.condi.endAt=this.timestampToDate(e.value);
				this.endCalShow=false;
			},

			calConfirm(e){
				
			},
			shaixuan(){
				this.$refs.paging.reload();
				this.shaixuanShow=false;
				
			},
			reset(){
				this.condi={
					name:'',
					status:'',
					customId:'',
					skuNo:'',
					cpxh:'',
					cpgg:'',
					cpkj:'',
					kksno:'',
					phone:'',
					personName:'',
					createAt:'',
					chejian:'',
					startTime:'',
					endTime:'',
					startAt:'',
					endAt:'',
				};
				this.shaixuanShow=false;
				this.$refs.paging.reload();
				
			},
			queryList(page,size){
				var query={page:page,limit:size,condi:this.condi}
				console.log(query);
				api.doRequest('get','valve/list',query).then(res=>{
					let data=res.data.data;
					this.$refs.paging.complete(data);
				})
				
			}
		}
	}
</script>

<style>
.listItem{width:710upx;padding-top:20upx;margin:20upx auto;box-shadow: 0 0 20upx #eee;border-radius:20upx;}
.itemText{padding-left:20upx;}
.shaixuanBar{
	width:710upx; padding:20upx;background:#fff;display: flex;align-items: center;justify-content: right;
}
.shaixuanBox{
	width:500upx; height:calc(100vh - 200upx);
	overflow:auto;
	margin-top:80upx;
	padding-bottom:120upx;
	position:relative;
}
.shaixuanBox .label{width:500upx; height:80upx; display: flex;align-items: center;margin-left:20upx;}
.shaixuanBox .wq-ipt{border:1upx solid #ccc;width:460upx;margin:10upx auto; text-indent:1em;height:70upx;border-radius:10upx;}
.shaixuanBox .wq-ipt1{width:460upx;margin:10upx auto; text-indent:1em;height:70upx;border-radius:10upx;}
.shaixuanBox .xidi{width:460upx;position:fixed;bottom:0;right:0;left:250upx;display:flex;align-items: center;justify-content: space-between;}
.shaixuanBox .xidi .wq-btn1{width:200upx;height:80upx;color:#fff;border-radius:20upx;display: flex;align-items: center;justify-content: center;background:#004ea2;}
.time{width:460upx;border:1upx solid #ccc;margin:5upx auto;height:70upx;display: flex;align-items: center;text-indent:1em;border-radius:10upx;color:#666;}
</style>
